<template>
  <div class="search">
    <div class="search_nav">
      <div class="iconfont iconarrow---left" @click="goBack"></div>
      <div class="search_input">
        <div class="iconfont iconsousuo-"></div>
        <input type="text" placeholder="《釜山行2》最新预告" v-model="keyWord" />
      </div>

      <div class="iconfont iconsousuoziduan" @click="search"></div>
    </div>

    <div class="search_allContent" v-if="searchList.length===0">
      <div class="history" v-if="historyContent.length">
        <div class="history_top">
          <h3>历史记录</h3>
          <div class="history_top_right" @click="clearHistory">
            <div class="iconfont iconqingkong"></div>
            <span>清空</span>
          </div>
        </div>

        <div class="history_content list">
            <div 
            class="item" 
            v-for="(item,index) in historyContent" 
            :key="index"
            @click="searchHistory(item)"
            >
            {{ item }}
          </div>
        </div>
      </div>

      <div class="hotSearch">
        <h3>热门搜索</h3>
        <div class="hotSearch_content list">
          <div
            class="item"
            v-for="(item,index) in hotSearchContent"
            :key="index"
            @click="hotSearch(item)"
          >
            <span>{{index+1}}</span>
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <Posts :post="item" v-for="item in searchList" :key="item.id" />
  </div>
</template>

<script>
import Posts from "@/components/Posts";

export default {
  components: {
    Posts
  },
  data() {
    return {
      keyWord: "",
      searchList: [],
      historyContent: [],
      hotSearchContent: ["王祖贤", "性感女歌手", "阿信", "关晓彤", "华为"]
    };
  },

  created() {
    const historyStorage = localStorage.getItem("history");

    if (historyStorage) {
      this.historyContent = JSON.parse(historyStorage);
    }
  },

  watch: {
    keyWord(newValue) {
      if (!newValue) {
        this.searchList = [];
      }
    },

    historyContent() {
      localStorage.setItem("history", JSON.stringify(this.historyContent));
    }
  },

  methods: {
    // 普通搜索
    search() {
      if (!this.keyWord) {
        return;
      }

      this.getSearch({ keyword: this.keyWord });
    },

    // 建议搜索
    hotSearch(item) {
      this.keyWord = item;
      this.getSearch({ keyword: item });
    },

    // 搜索历史记录
    searchHistory(item){
      this.keyWord = item;
      this.getSearch({ keyword: item });
    },

    // 清空历史记录
    clearHistory(){
      this.historyContent = []
    },

    // 发送ajax请求
    getSearch(data) {
      this.$axios({
        url: "/post_search",
        params: data
      }).then(res => {
        console.log("搜索文章返回结果", res);

        if (this.historyContent.indexOf(this.keyWord) == -1) {

          // console.log('关键词',this.keyWord);
          this.historyContent.push(this.keyWord);

        }
        // console.log("历史记录数组", this.historyContent);

        this.searchList = res.data.data;
      });
    },

    goBack() {
      console.log('返回键打印搜索列表',this.searchList);
      console.log('搜索列表长度',this.searchList.length);
      if (this.searchList.length == 0) {
        this.$router.back();
      }  else {
        this.keyWord = "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  .search_nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;

    .iconarrow---left {
      font-size: 20px;
      font-weight: bold;
    }

    .search_input {
      display: flex;
      align-items: center;
      width: 250px;
      height: 40px;
      border-radius: 20px;
      background: #f5f6f7;

      .iconsousuo- {
        margin: 0 2px 0 20px;
        font-size: 16px;
      }

      input {
        width: 180px;
        border: none;
        background: #f5f6f7;
        text-indent: 4px;
      }

      input::-webkit-input-placeholder {
        font-size: 14px;
      }
    }

    .iconsousuoziduan {
      font-size: 28px;
      padding-top: 6px;
    }
  }

  .search_allContent {
    padding: 10px 20px;

    .history{
      .history_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .history_top_right{
          display: flex;
          align-items: center;
          color:#7d7d7d;

          .iconqingkong{
            font-size: 14px;
          }

          span{
            margin-left: 4px;
            font-size: 14px;
          }
        }
      }
    }

    h3 {
      color: #333;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      padding: 16px 0;
    }

    .history_content .item {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      background-color: #f5f6f7;
      margin: 0 4px 6px 0;
      padding: 0 12px;
      border-radius: 15px;
      color: #7d7d7d;
    }

    .hotSearch_content.list {
      flex-direction: column;
      flex-wrap: nowrap;

      .item {
        padding: 6px;
        font-size: 14px;
        color: #0000cc;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: middle;
        display: inline-block;
        border-bottom: 1px solid #f3f3f3;

        &:nth-child(1) span {
          background-color: #f54545;
        }

        &:nth-child(2) span {
          background-color: #ff8547;
        }

        &:nth-child(3) span {
          background-color: #ffac38;
        }

        span {
          width: 10px;
          height: 10px;
          background-color: #8eb9f5;
          color: #fff;
          padding: 2px 3px;
          font-size: 12px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>